<template>
  <div class="result_vote">
    <head-top head-title="查看投票结果" goBack="true"></head-top>
    <div class="no-data" style="padding-top:250px; text-align: center; font-size:20px" v-if="code === 400">
      {{message}}
    </div>
    <!--选举投票-->
    <div class="vote_box" v-if="type === 'can'">
      <div class="vote_list" v-for="(can,index) in dataList" :key="'ca'+index">
        <div class="border-bottom">
          <div class="introduce">
            <div class="img_people">
              <img
                :src="can.img || 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1651318081,2860235060&fm=27&gp=0.jpg'"
                alt="">
            </div>
            <div class="content_word">
              <div class="word_top">
                <p>{{can.options}}</p>
                <span>{{can.created_at}}</span>
              </div>
              <div class="word_bottom">
                <p>{{can.house}}</p>
                <router-link :to="'/home/VotingDetail/'+can.candidateId" tag="span">查看详细内容</router-link>
              </div>
            </div>
          </div>
          <div class="vote_result">
            <img src="./images/xuanzhong@2x.png" alt="">
            <div class="result_text">
              <span>{{can.type}}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!--事务投票-->
    <div class="vote_box" v-if="type === 'sup'">
      <div class="vote_list" v-for="(sup,index2) in dataList" :key="'su'+index2">
        <div class="border-bottom">
          <div class="introduce">
            <div class="img_people">
              <img
                :src="sup.img || 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1651318081,2860235060&fm=27&gp=0.jpg'"
                alt="">
            </div>
            <div class="content_word">
              <div class="word_top">
                <p>{{sup.options}}</p>
                <span>{{sup.created_at}}</span>
              </div>
              <div class="word_bottom">
                <p>{{sup.content}}</p>
                <router-link :to="'/home/VillageDetail/'+sup.articleId" tag="span">查看详细内容</router-link>
              </div>
            </div>
          </div>
          <div class="vote_result">
            <img src="./images/xuanzhong@2x.png" alt="">
            <div class="result_text">
              <span>{{sup.type}}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!--满意度投票-->
    <div class="satisfied" v-if="type === 'sat'">
      <div class="all_box" v-for="(sat,index3) in dataList.data" :key="'sa'+index3">
        <div class="candidate">
          <div class="introduce">
            <div class="word_bottom">
              <p>{{sat.title}}</p>
            </div>
          </div>
          <!--选项类别-->
          <div class="answer">
            <img src="./images/xuanzhong@2x.png" alt="">
            <div class="result_sat">
              <span>{{sat.type}}</span>
            </div>
          </div>
        </div>
        <div class="all_line"></div>
      </div>
      <div class="view_des">
        <div class="box_title border-bottom">
          <span>总体整改建议：</span>
        </div>
        <p>{{dataList.content.content}}</p>
      </div>
    </div>
  </div>
</template>
<style lang="scss">
  .result_vote {
    width: 100%;
    padding-top: 40px;
    .vote_box {
      width: 100%;
      .vote_list {
        height: 90px;
        &:last-child {
          .border-bottom {
            background-size: 100% 0;
          }
        }
        .border-bottom {
          margin: 0 10px;
        }
        .introduce {
          width: 100%;
          height: 60px;
          .img_people {
            padding-top: 10px;
            float: left;
            width: 14%;
            img {
              width: 44px;
              height: 44px;
              border-radius: 50%;
            }
          }
          .content_word {
            float: left;
            width: 86%;
            .word_top {
              margin-top: 10px;
              height: 22px;
              p {
                font-size: 15px;
                float: left;
                width: 170px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              }
              span {
                float: right;
                font-size: 10px;
                color: #999999;
              }
            }
            .word_bottom {
              height: 22px;
              line-height: 22px;
              p {
                font-size: 12px;
                float: left;
                color: #666666;
                width: 180px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              }
              span {
                float: right;
                font-size: 12px;
                color: #0078de;
              }
            }
          }
        }
        .vote_result {
          width: 100%;
          display: inline-flex;
          justify-content: flex-end;
          align-items: center;
          padding-bottom: 10px;
          img {
            width: 20px;
            height: 20px;
            padding-left: 10px;
          }
          .result_text {
            padding-left: 10px;
            width: 40px;
            text-align: right;
            span {
              color: #999;
            }
          }
        }
      }
    }
    .satisfied {
      width: 100%;
      .all_box {
        width: 100%;
        .candidate {
          padding: 10px;
          .introduce {
            width: 100%;
            height: 44px;
            .word_bottom {
              height: 22px;
              line-height: 44px;
              p {
                font-size: 15px;
                float: left;
                color: #292929;
                width: 180px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              }
              span {
                float: right;
                font-size: 13px;
                color: #0078de;
              }
            }
          }
          .answer {
            width: 100%;
            height: 45px;
            border: 1px solid #cccccc;
            border-radius: 5px;
            display: inline-flex;
            align-items: center;
            img {
              width: 20px;
              height: 20px;
              padding-left: 10px;
            }
            .result_sat {
              padding-left: 10px;
              span {
                color: #999;
                font-size: 14px;
              }
            }
          }
          .line_gray {
            width: 100%;
            height: 5px;
            background: #f2f2f2;
          }
        }
        .all_line {
          width: 100%;
          height: 10px;
          background: #f2f2f2;
        }
      }
      .view_des {
        padding: 10px;
        .box_title {
          padding: 13px 0;
          span {
            font-size: 15px;
            color: #666666;
          }
        }
        p {
          padding-top: 10px;
          font-size: 13px;
          color: #666;
          line-height: 20px;
        }
      }
    }
  }
</style>
<script>
  import headTop from '../header/Header.vue'
  import { getResult } from '../../api/MyIdent'

  export default {
    name: 'MyVote',
    data () {
      return {
        type: '', // 投票类型
        dataList: [],
        message: '',
        code: ''
      }
    },
    components: {
      headTop
    },
    created () {
      this._getResult()
    },
    methods: {
      _getResult () {
        getResult(this.$route.params.id, this.$route.params.type).then(res => {
          this.type = this.$route.params.type
          // console.log(res)
          if (res.code === 200) {
            this.dataList = res.data
            // console.log(this.dataList)
          }
          if (res.code === 400) {
            this.code = res.code
            this.message = res.error.message
          }
        })
      }
    }
  }
</script>
